<template>
	<!-- 登录 -->
	<el-row class="flex" justify="center" align="middle" style="height: 100%;">
		<el-col :span="6">
			<el-form ref="ruleFormRef" :model="formData" :rules="rules" status-icon>
				<h2 style="text-align: center;">用户登录</h2>
				<el-form-item label-width="120px" label="用户名" prop="username">
					<el-input v-model="formData.username" />
				</el-form-item>
				<el-form-item label-width="120px" label="密码" prop="password">
					<el-input v-model="formData.password" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)">
						登录
					</el-button>
					<el-button @click="router.push({ name: 'register' })">注册</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
</template>
<script setup>
import router from '@/router';
import { reactive, ref } from 'vue'
import { login } from '@/api/userApi';
const ruleFormRef = ref()
const formData = reactive({
	username: '',
	password: ''
})
const rules = reactive({
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 20, message: '长度是3-20个字符', trigger: 'blur' },
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 3, max: 20, message: '长度是3-20个字符', trigger: 'blur' },
	],
})
const submitForm = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			login(formData)
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>
<style lang="scss" scoped>
.flex {
	background-image: url(../assets/img/01.JPG);
	background-size: 100%;
}
</style>